<template>
  <ItemInfo title="付款账户信息" edit @edit="isshow = true">
    <PayAccount
      :isshow="isshow"
      @close="isshow = false"
      :list="billingList"
      @updata="updata"
    />
    <template v-if="billingList.length > 0">
      <div class="billingItem" v-for="item in billingList" :key="item.id">
        <div>
          <span>开户名称：</span>
          <p>{{ item.accountName }}</p>
        </div>
        <div>
          <span>开户银行：</span>
          <p>{{ item.bank }}</p>
        </div>
        <div>
          <span>银行账号：</span>
          <p>{{ item.bankAccount }}</p>
        </div>
      </div>
    </template>
    <template v-else>
      <div class="tishi content">
        <span>提示：</span>
        <p>暂时没有信息</p>
      </div>
    </template>
  </ItemInfo>
</template>

<script>
import PayAccount from './payaccount'
import {
  addContractSubjectPaymentAccountListUpdate,
  editCustomerPaymentAccountListUpdate
} from '@/api/human'
export default {
  props: ['list'],
  data() {
    return {
      billingList: [],
      isshow: false
    }
  },
  watch: {
    list(n) {
      this.billingList = n
    }
  },
  components: {
    PayAccount
  },
  methods: {
    async updata(form) {
      if (form) {
        let data = null
        if (this.path === '/signed/signedlist/info') {
          // 签约主体的修改
          data = await addContractSubjectPaymentAccountListUpdate(form)
        } else {
          // 客户管理的修改
          data = await editCustomerPaymentAccountListUpdate(form)
        }
        if (data.data) {
          this.$message.success('修改成功！')
        }
      }
      this.$emit('updata')
    }
  },
  created() {
    this.path = this.$route.path
    console.log(this.path)
  }
}
</script>

<style lang="less" scoped>
.billingItem {
  > div {
    width: 25% !important;
    &:last-child {
      width: 50% !important;
    }
  }
  &:first-child {
    margin-top: 0 !important;
  }
}
</style>
